<template>
    <div class="navbar">
      <van-tabbar v-model="active" route>
        <!-- <van-tabbar-item icon="home-o" to="/home">
           <template #icon>
            <img :src="active == 0 ? $img.home1 : $img.home0" />
           </template>
        </van-tabbar-item>
        <van-tabbar-item icon="search"  to="/category">
         <template #icon>
            <img :src="active == 1 ? $img.category1 : $img.category0" />
           </template>
        </van-tabbar-item>
        <van-tabbar-item icon="friends-o">
          <template #icon>
            <img :src="$img.jingxi0"/>
           </template>
        </van-tabbar-item>
        <van-tabbar-item icon="setting-o" to="/cart">
          <template #icon>
            <img :src="active == 3 ? $img.cart1 : $img.cart0" />
           </template>
        </van-tabbar-item>
        <van-tabbar-item icon="setting-o">
          <template #icon>
            <img :src="$img.login0" />
           </template>
        </van-tabbar-item> -->
        <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
        <van-tabbar-item icon="search" to="/category">分类</van-tabbar-item>
        <van-tabbar-item icon="friends-o" to="/cart">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting-o" to="/mine">我的</van-tabbar-item>
      </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    }
  },
  methods: {
     onChange(index) {
      this.active = index;
      console.log(this.active);
      if(this.active == 2){
        this.$router.push('/jingxi')
      }else if(this.active == 4) {
        this.$router.push('/tologin');
      }
    },
  }
}
</script>

<style scoped lang="scss">
.navbar {
  .van-tabbar-item__icon{
    img {
      width: 100%;
      height: 100%;
    }
  }

}
</style>